{include file="/index/top" /}<!--引入网页头部文件-->
<style>
    .homepage-hero-module {
        border-right: none;
        border-left: none;
        position: relative;
    }

    .no-video .video-container video,
    .touch .video-container video {
        display: none;
    }

    .no-video .video-container .poster,
    .touch .video-container .poster {
        display: block !important;
    }

    .video-container {
        position: relative;
        bottom: 0%;
        left: 0%;
        height: 100%;
        width: 100%;
        overflow: hidden;
        background: #000;
    }

    .video-container .poster img {
        width: 100%;
        bottom: 0;
        position: absolute;
    }

    .video-container .filter {
        z-index: 100;
        position: absolute;
        background: rgba(0, 0, 0, 0.4);
        width: 100%;
    }

    .video-container img {
        position: absolute;
        z-index: 0;
        bottom: 0;
    }

    .video-container img.fillWidth {
        width: 100%;
    }

    .center {
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: 0 auto;
    }

    .banner {
        position: absolute;
        z-index: 20;
        width: 100%;
        text-align: center;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 30%;
        
        margin: auto;
    }

    .banner-text {
        font-family: Pecita;
        color: #ffffff;
        font-size: 70px;
    }

    .banner-text > p {
        line-height: 150px;
    }

    .banner-button {
        margin-top: 3%;
    }

    .banner-button > button {
        margin: 40px 40px;
        border-radius: 5%;
        width: 130px;
        height: 50px;
        font-size: 18px;
    }

    .banner-button > button:first-child {
        background: none;
        color: #ffffff;
        border: 1px solid #ffffff;
    }

    .banner-button > button:first-child:hover {
        background: #009688;
        border: 1px solid #009688;
    }

    .banner-button > button:last-child {
        background: #009688;
        color: #ffffff;
        border: 1px solid #009688;
    }

    .banner-button > button:last-child:hover {
        background: #8deafc;
        color: #ffffff;
        border: 1px solid #8deafc;
    }

    @keyframes Mydown {
        0% {
            top: 0
        }
        100% {
            top: 10%
        }
    }

    @-moz-keyframes Mydown /* Firefox */
    {
        0% {
            top: 0
        }
        100% {
            top: 10%
        }
    }

    @-webkit-keyframes Mydown /* Safari and Chrome */
    {
        0% {
            top: 0%
        }
        100% {
            top: 10%
        }
    }

    @-o-keyframes Mydown /* Opera */
    {
        0% {
            top: 0
        }
        100% {
            top: 10%
        }
    }

    .left {
        float: left;
    }

    .right {
        float: right;
    }

    .ic-play {
        animation-name: Mydown;
        animation-duration: 1s;
        animation-timing-function: linear;
        animation-delay: 1s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        animation-play-state: running; /* Opera */
        position: relative;
    }

    .modal-style {
        margin-top: 10%;
    }

    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }

    input[type="number"] {
        -moz-appearance: textfield;
    }

    .content-news {
        width: 1200px;
        display: block;
        clear: both;
        left: 0;
        right: 0;
        margin: 0 auto;
        padding-top: 100px;
    }

    .content-news-bd-l {
        width: 600px;
        overflow: hidden;
        white-space: normal;
        text-overflow: ellipsis;
    }

    .content-news-bd-l-titles {
        overflow: hidden;
    }

    .content-news-bd-l-titles {
        height: 120px;
        position: relative;
        margin-top: -124px;
        background: hsla(0, 0%, 100%, 0.8);
    }

    .content-news-bd-l-titles > h4 {
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 10px;
        font-size: 18px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        cursor: pointer;
    }

    .content-news-bd-l-titles > p {
        width: 550px;
        line-height: 20px;
        height: 80px;
        margin: 0 20px;

        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        font-weight: 100;
    }

    .content-news-bd-r {
        margin-left: 30px;
        width: 570px;
        position: relative;
    }

    .content-news-bd-r > ul > li > a:hover .content-news-bd-r-news > h4 {
        color: #009688;
    }

    .content-news-bd-r-date {
        position: relative;
        height: 100px;
        float: left;
        width: 80px;
        color: white;
        text-align: center;
        background: #009688;
    }

    .content-news-bd-r-news {
        float: left;
        width: 450px;
        overflow: hidden;
        white-space: normal;
        text-overflow: ellipsis;
        height: 100px;
        margin-left: 20px;
    }

    .content-news-bd-r ul li {
        border-bottom: 1px solid #a9a9a9;
        height: 115px;
        margin-top: 16px;

    }

    .content-news-bd-r > ul > li:first-child {
        margin-top: 0;
    }

    .content-news-bd-r-news > h4 {
        font-size: 18px;
    }

    .content-news-bd-r-news > p {
        margin-top: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        font-weight: 100;
    }

    .day {
        height: 60px;
        font-size: 36px;
        line-height: 60px;
    }

    .year {
        background: #323f33;
        height: 40px;
        font-size: 18px;
        line-height: 40px;
    }

    .layui-form-label {
        width: 100px;
    }

    .partner {
        width: 1200px;
        left: 0;
        right: 0;
        clear: both;
        margin: 0 auto;
    }

    .partner-body {
        width: 752px;
        left: 0;
        right: 0;
        margin: 0 auto;
    }

    .partner-body ul li {
        float: left;
        width: 300px;
        height: 150px;
        margin-left: 76px;
        margin-bottom: 100px;
        margin-right: 76px;
        margin-top: 50px;
        border: 1px solid #cccccc;

    }

    .partner-body > ul > li > div {
        width: 300px;
        height: 150px;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }

    .partner-body > ul > li > img {
        height: 100px;
    }

    .partner-body ul li:first-child {
        margin-left: 0;
    }

    .partner-body ul li:last-child {
        margin-right: 0;
    }

    .form-body {
        left: 0;
        right: 0;
        margin: 0 auto;
        width: 100%;
        clear: both;
        height: 500px;
    }

    .form-body > form {
        width: 40%;
        left: 0;
        right: 0;
        margin: 0 auto;
        margin-top: 40px;
    }

    .input-margin-left {
        margin-left: 10px;
    }

    .bg {
        background: none;
    }

    .ic-play-introduce:hover {
        border-bottom: none;
        background: none;
    }

    .introduce-body {
        width: 1200px;
        left: 0;
        right: 0;
        margin: 0 auto;
    }

    .introduce-body ul li {
        width: 370px;
        height: 200px;
        float: left;
        margin-left: 10px;
        font-size: 16px;
        text-align: center;
    }

    .introduce-body > ul > li > p {
        margin-top: 30px;
        line-height: 40px;
    }

    .introduce-img {
        width: 1200px;
        left: 0;
        right: 0;
        margin: 0 auto;
    }

    .introduce-img > img {
        width: 100%;
        margin-top: 250px;
    }

    input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
        color: #ffffff;
    }

    input::-moz-placeholder, textarea::-moz-placeholder {
        /* Mozilla Firefox 19+ */
        color: #ffffff;
    }

    input:-moz-placeholder, textarea:-moz-placeholder {
        /* Mozilla Firefox 4 to 18 */
        color: #ffffff;
    }

    input:-ms-input-placeholder, textarea:-ms-input-placeholder {
        /* Internet Explorer 10-11 */
        color: #ffffff;
    }

</style>
<div class="homepage-hero-module">
    <div class="video-container">
        <!--引入导航栏-->
        {include file="/index/topnav"}
        <div class="banner" id="child">
            <div class="banner-text layui-anim layui-anim-scaleSpring">
                <p>湖 南 网 络 工 程 职 业 学 院</p>

                <p>计 算 机 协 会</p>

                <h3>交流学术知识，传播创新理念，激发创新意识，弘扬创新精神</h3>

            </div>
            <div class="banner-button center layui-anim layui-anim-upbit">
                <button type="button" class="btn btn-primary btn-lg" id="apply" data-method="notice">会员登录</button>
                <button type="button" class="btn btn-primary btn-lg layui-btn" id="queryVip" data-method="notice">会员查询
                </button>
            </div>
            <div class="ic-play">
                <a class="ic-play-introduce" href="#introduce">
                    <i class="icon-double-angle-down icon-4x"
                       style="color: #ffffff;text-shadow: black 0.1em 0.1em 0.2em"></i>
                </a>
            </div>
        </div>
        <img src="__static__/images/back.jpg" width="100%" height="100%" style="overflow:hidden; ">
        <!--<video autoplay loop class="fillWidth">-->
            <!--<source src="__static__/Aloha-Mundo/MP4/Aloha-Mundo.mp4" type="video/mp4"/>-->
            <!--Your browser does not support the video tag. I suggest you upgrade your browser.-->
            <!--<source src="__static__/Aloha-Mundo/WEBM/Aloha-Mundo.webm" type="video/webm"/>-->
            <!--Your browser does not support the video tag. I suggest you upgrade your browser.-->
        <!--</video>-->
    </div>
</div>
<div id="introduce" class="introduce">
    <div style="width:220px;left:0;right:0;margin:0 auto; margin-top:50px;border-bottom: 4px solid #009688;margin-bottom: 80px">
        <h2 style="text-align: center;padding-bottom: 20px">协 会 简 介</h2>
    </div>
    <div class="introduce-body">
        <ul>
            <li>
                <span style="color: #009E94;font-size: 60px;" class="glyphicon glyphicon-send"></span>

                <p style="text-align: left;padding-left: 40px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;计算机协会（简称计协）原名网页制作兴趣协会，创建于2017年2月24日，由2016级网络资源系软件一班宋杰组织并组建。并于2017年3月17日向湖南网络工程职业学院校团委社团联合会申请社团成立。并分配网络资源系姚丽娜教授、刘冠群副教授、罗桂琼副教授作为协会指导老师。</p>
            </li>
            <li>
                <span style="color: #f1734c;font-size: 60px;" class="glyphicon glyphicon-fire"></span>

                <p style="text-align: left;padding-left: 40px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;协会宗旨：交流学术知识，传播创新理念，激发创新意识，弘扬创新精神
                    <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;协会精神：团结、进取、友爱、创新、交流
                    <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;协会性质：公益性、学术类社团</p>
            </li>
            <li>
                <span style="color: #00c0ef;font-size: 60px;" class="glyphicon glyphicon-flag"></span>

                <p style="text-align: left;padding-left: 40px">
                    长沙岳麓峰会；
                    <br>长沙互联网技术峰会；
                    <br>各大与计算机、创新创业相关的论坛，讲座、交流会；
                    <br>丰富的专业知识学习资料；
                    <br>国家级、省级、市级、院级各大比赛；
                    <br>等等.......
                </p>
            </li>
        </ul>
    </div>
    <div class="introduce-img">
        <img style="vertical-align: middle" src="__static__/images/indexhy.jpg">
    </div>
</div>
<div class="content-news">
    <div style="width:220px;left:0;right:0;margin:0 auto;text-align: center; border-bottom: 4px solid #009688;margin-bottom: 80px">
        <h2 style="padding-bottom: 20px">协 会 新 闻</h2>
    </div>
    <div class="content-news-body" id="news">
        <div class="content-news-bd-l left" v-for="(homenews,index) in homenewsdata" v-if="index<1">
            <div class="content-news-bd-l-img ">
                <img :src="baseUrl+homenews.thumimg" width="600" height="380">
            </div>
            <div class="content-news-bd-l-titles">
                <h4>{{homenews.title}}</h4>

                <p>{{homenews.intro}}</p>
            </div>
        </div>
        <div class="content-news-bd-r left">
            <ul>
                <li v-for="(news,index) in newsdata" v-if="index<3">
                    <a href="#">
                        <div class="content-news-bd-r-date left">
                            <div class="day">{{news.day}}</div>
                            <div class="year">{{news.year}}-{{news.month}}</div>
                        </div>
                        <div class="content-news-bd-r-news right">
                            <h4>{{news.title}}</h4>

                            <p>{{news.intro}}</p>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="partner" style="">
    <div style="width:220px;left:0;right:0;margin:0 auto;text-align: center; border-bottom: 4px solid #009688;padding-top: 100px;margin-bottom: 30px">
        <h2 style="padding-bottom: 20px">合 作 单 位</h2>
    </div>
    <div class="partner-body">
        <ul>
            <li>
                <div><a href="http://www.jiancenj.com/"><img src="__static__/images/jiance.jpg"></a></div>
            </li>
            <li>
                <div><a href="https://www.w3cschool.cn/"><img src="__static__/images/w3c.jpg"></a></div>
            </li>
        </ul>
    </div>
</div>
<div class="form-body"
     style="margin-top: 100px;background: url('__static__/images/test.jpg')no-repeat;background-size: 100% 500px;">
    <div style=" width:220px;left:0;right:0;margin:0 auto;text-align: center; border-bottom: 4px solid #009688;padding-top: 50px;margin-bottom: 30px">
        <h2 style="padding-bottom: 20px;color: #ffffff">交 流 合 作</h2>
    </div>
    <form class="layui-form" id="selecClass" style="color: #ffffff">
        <div class="layui-form-item"><label class="layui-form-label">称呼</label>

            <div class="layui-input-block">
                <input type="text" name="Name" lay-verify="required" autocomplete="off" maxlength="4"
                       placeholder="如何称呼您" class="bg layui-input"></div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">手机号码</label>

                <div class="layui-input-inline input-margin-left">
                    <input type="tel" id="telephone" name="Telephone" placeholder="请输入手机号码" lay-verify="required|phone"
                           class="layui-input bg">
                </div>
                <div class="layui-input-inline">
                    <input type="text" name="VcCode" lay-verify="required" placeholder="请输入验证码" autocomplete="off"
                           class="layui-input bg">
                </div>
                <div class="layui-input-inline">
                    <button class="layui-btn" id="getCode">获取验证码</button>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱</label>

            <div class="layui-input-block">
                <input type="email" name="Email" placeholder="请输入常用邮箱" lay-verify="email"
                       autocomplete="off"
                       class="layui-input bg">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">内容</label>

            <div class="layui-input-block">
                <textarea placeholder="交流合作内容" name="Content" class="layui-textarea bg"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="cooperation" lay-filter="cooperation">提 交</button>
            </div>
        </div>
    </form>
</div>
{include file="/index/footer"}
<script src="__static__/Common/common.js"></script>

<script>
    layui.use('layer', function () { //独立版的layer无需执行这一句
        var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
        //触发事件
        var active = {
            notice: function () {
                //示范一个公告层
                layer.open({
                    type: 1
                    ,
                    title: false //不显示标题栏
                    ,
                    area: ['500px', '250px']
                    ,
                    shade: 0.2
                    ,
                    id: 'LAY_layuipro' //设定一个id，防止重复弹出
                    ,
                    btnAlign: 'c'
                    ,
                    moveType: 0 //拖拽模式，0或者1
                    ,
                    content: '<form style="margin-top: 60px" class="layui-form" method="post" enctype="multipart/form-data"><div class="layui-form-item" style="left: 0;right: 0;margin: 0 auto;width: 400px; margin-top: 20px;font-size: 16px;"> <label class="layui-form-label">姓名：</label> <div class="layui-input-block"> <input type="text" style="width: 300px;" maxlength="4" name="queryName" required  lay-verify="required" placeholder="请输入查询的姓名" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item" style="left: 0;right: 0;margin: 0 auto;width: 400px;margin-top: 20px;font-size: 16px;"> <label class="layui-form-label">学号：</label> <div class="layui-input-block"> <input type="number"  oninput="if(value.length>12)value=value.slice(0,12)" name="queryStudentId" style="width: 300px;" required  lay-verify="required" placeholder="请输入查询的学号" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item" style="left: 0;right: 0;margin: 0 auto"> <div class="layui-input-block" style="left: 0;right: 0;margin: 0 auto;width: 150px;"> <button class="layui-btn " id="testsumbit" style="background-color:#5bd3fc; width: 150px; margin-top: 20px;font-size: 16px;" lay-submit lay-filter="formQueryInfo">立即查询</button> </div> </div> </form>'
                    ,
                    success: function (layero) {
                        layui.use('form', function () {
                            var form = layui.form;
                            //监听提交
                            form.on('submit(formQueryInfo)', function (data) {
                                console.log("已启动");
                                var index = layer.load();
                                $.ajax({
                                    type: "POST",
                                    url: __APIHOST__ + "authenticationVip",
                                    dataType: "json",
                                    data: JSON.stringify(data.field),
                                    async: false,
                                    contentType: "application/json",
                                    headers: __AUTH__,
                                    success: function (resp) {
                                        layui.use('layer', function(){
                                            var layer = layui.layer;
                                            layer.msg(resp.msg);
                                        });
                                    }
                                });
                                layer.close(index);
                                return false;
                            });
                        });
                    }
                });
            }
        };

        $('#queryVip').on('click', function () {
            var othis = $(this), method = othis.data('method');
            active[method] ? active[method].call(this, othis) : '';
        });
    });
    layui.use('layer', function () { //独立版的layer无需执行这一句
        var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
        //触发事件
        var active = {
            notice: function () {
                //示范一个公告层
                layer.open({
                    type: 1
                    ,
                    title: false //不显示标题栏
                    ,
                    area: ['500px', '250px']
                    ,
                    shade: 0.2
                    ,
                    id: 'LAY_layuipro' //设定一个id，防止重复弹出
                    ,
                    btnAlign: 'c'
                    ,
                    moveType: 0 //拖拽模式，0或者1
                    ,
                    content: '<form style="margin-top: 60px" class="layui-form" method="post" enctype="multipart/form-data" id="login"><div class="layui-form-item" style="left: 0;right: 0;margin: 0 auto;width: 400px; margin-top: 20px;font-size: 16px;"><label class="layui-form-label">学 号：</label><div class="layui-input-block"><input type="number" style="width: 300px;" oninput="if(value.length>12)value=value.slice(0,12)" name="studentId" required lay-verify="required" placeholder="请输入学号" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item" style="left: 0;right: 0;margin: 0 auto;width: 400px;margin-top: 20px;font-size: 16px;"><label class="layui-form-label">密 码：</label><div class="layui-input-block"><input type="password" oninput="if(value.length>12)value=value.slice(0,12)" name="password" style="width: 300px;" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item" style="left: 0;right: 0;margin: 0 auto"><div class="layui-input-block" style="left: 0;right: 0;margin: 0 auto;width: 150px;"><button class="layui-btn " id="login" style="background-color:#5bd3fc; width: 150px; margin-top: 20px;font-size: 16px;" lay-submit lay-filter="login">登 录</button></div></div></form>'
                    ,
                    success: function (layero) {
                        layui.use('form', function () {
                            var form = layui.form;
                            //监听提交
                            form.on('submit(login)', function (data) {
                                console.log("登录已启动");
                                var index = layer.load();
                                console.log(data);
                                $.ajax({
                                    type: "POST",
                                    url: __APIHOST__ + "login",
                                    dataType: "json",
                                    data: JSON.stringify(data.field),
                                    async: false,
                                    contentType: "application/json",
                                    headers: __AUTH__,
                                    success: function (resp) {
                                        if(resp.code ==1){
                                            layui.use('layer', function(){
                                                var layer = layui.layer;
                                                layer.msg(resp.msg);
                                            });
                                            window.location.href ="/user"

                                        }else{
                                            layui.use('layer', function(){
                                                var layer = layui.layer;
                                                layer.msg(resp.msg);
                                            });
                                        }

                                    }
                                });
                                layer.close(index);
                                return false;
                            });
                        });
                    }
                });
            }
        };

        $('#apply').on('click', function () {
            var othis = $(this), method = othis.data('method');
            active[method] ? active[method].call(this, othis) : '';
        });
    });
</script>
<script>
    $(document).ready(function () {
        $('.ic-play a').click(function () {
            if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
                var $target = $(this.hash);
                $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
                if ($target.length) {
                    var targetOffset = $target.offset().top;
                    $('html,body').animate({scrollTop: targetOffset}, 800);
                    return false;
                }
            }
        });
    });
</script>
<script>
    $(function () {
        $.ajax({
            type:"GET",
            url:"api/getnews",
            datatype:"json",
            async:true,
            contentType:"application/json",
            headers:__AUTH__,
            success:function(resp){
                var newsdata = new Array();
                var homenewsdata = new Array();
                resp.data.forEach(function (item,index){
                    if(resp.data[index].type == 1){
                        homenewsdata.push(resp.data[index]);
                    }else{
                        newsdata.push(resp.data[index]);
                    }
                });
                console.log(homenewsdata);
                new Vue({
                    el: '#news',
                    data: {
                        baseUrl:"__static__",
                        newsdata: newsdata,
                        homenewsdata:homenewsdata
                    }
                });
            }
        })
    })
</script>
<script>
    layui.use('form', function () {
        var form = layui.form;
        //监听提交
        form.on('submit(cooperation)', function (data) {
            $.ajax({
                type: "POST",
                url: "api/cooperation",
                dataType: "json",
                data: JSON.stringify(data.field),
                async: false,
                contentType: "application/json",
                headers: __AUTH__,
                success: function (resp) {
                    layui.use('layer', function(){
                        var layer = layui.layer;
                        layer.msg(resp.msg);
                    });
                },
                error:function(error){
                    console.log(error)
                }
            });
            return false;
        })
    })
</script>
</body>
</html>